class Snake{
    //蛇头
    head:HTMLElement;
    //蛇身
    bodies:HTMLCollection;
    //蛇容器
    element:HTMLElement;
    constructor(){
        // !表示不存在为空
        this.element = document.getElementById('snake')!;
        this.head = document.querySelector('#snake > div') as HTMLElement;
        this.bodies = this.element.getElementsByTagName('div');
    };

    //获取蛇头的横坐标
    get X(){
        return this.head.offsetLeft
    };
    //获取蛇头的竖坐标
    get Y(){
        return this.head.offsetTop
    };
    
    //设置位置时候 有个范围 0-290 
    set X(value){
        if(this.X===value){
            //表示没有移动
            return ;
        }
        if(value<0||value>290){
            throw new Error('蛇撞墙了！')
        }
        //第二个身体 等于 蛇头的位置  掉头
        if(this.bodies[1]&&(this.bodies[1] as HTMLElement).offsetLeft===value){
             if(value>this.X){
             // 如果新值value大于旧值X，则说明蛇在向右走，此时发生掉头，应该使蛇继续向左走
                 value=this.X-10
             }else{
                 value=this.X+10
             }
        }
        // 移动身体
        this.moveBody()
        this.head.style.left = value + 'px';
        this.checkHeadBody();
    };
    set Y(value){
        if(this.Y===value){
            //表示没有移动
            return ;
        }
        if(value<0||value>290){
            throw new Error('蛇撞墙了！')
        }

      // 修改y时，是在修改垂直坐标，蛇在上下移动，蛇在向上移动时，不能向下掉头，反之亦然
      if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
        if (value > this.Y) {
            value = this.Y - 10;
        } else {
            value = this.Y + 10;
        }
      }

        // 移动身体
        this.moveBody()
        this.head.style.top = value + 'px';
        this.checkHeadBody();

    };
    addBody(){
        this.element.insertAdjacentHTML("beforeend", "<div></div>");
    }
    //身体的移动
    moveBody(){
        for(let i=this.bodies.length-1;i>0;i--){
            // 获取前面一个身体的位置
            let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
            let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;

            (this.bodies[i] as HTMLElement).style.left = X + 'px';
            (this.bodies[i] as HTMLElement).style.top = Y + 'px';
        }
    };
    checkHeadBody(){
        // 判断蛇头与蛇身的位置是否重叠
        for(let i=1;i<this.bodies.length;i++){
            let bd=this.bodies[i] as HTMLElement;
            if(this.X===bd.offsetLeft&&this.Y===bd.offsetTop){
                throw new Error('撞到自己了！');
            }
        }
    }
}
export default Snake